<template>
  <div>
    <table border="1">
      <caption>
        欢迎光临，vue开发的收银系统 水果店
      </caption>
      <tr>
        <th>苹果10￥/斤，折扣《8折》</th>
      </tr>
      <tr>
        <td>
          请输入你要购买的斤数
          <input type="text" value="斤数" v-model.number="num" />
        </td>
      </tr>
      <tr>
        <td>
          <button @click="pay">结账买单~</button>
        </td>
      </tr>
      <tr>
        <td v-text="txt"></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      txt: " 结账单：总价：0￥元 折后价：0￥元 省了：0￥元",
    };
  },
  methods: {
    pay() {
      this.txt = `
       结账单：总价：${10 * this.num}￥元 折后价：${10 * this.num * 0.8}￥元
          省了：${10 * this.num - 10 * this.num * 0.8}￥元`;
    },
  },
};
</script>

<style>
table {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}
</style>